import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import { getListData } from '../../../fetch/home/home'
import ListComponent from '../../../components/List'
import LoadMore from '../../../components/LoadMore';
import { listMock } from '../../../fetch/staticMock/home';//静态假数据

import './style.less'

class List extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state={
            data:[],//存储列表信息
            hasMore:false, //记录当前状态下，是否还有更多数据
            isLoadingMore:false,//记录是否是“加载中。。。 还是点击加载更多
            page:1//下一页的页码
        }
    }
    render() {
        return (
            <div>
                <h2 className="home-list-title">猜你喜欢</h2>
                {
                    this.state.data.length
                        ? <ListComponent data={this.state.data}/>
                        : <div>加载中...</div>
                }
                {
                    this.state.data.length
                    ? <LoadMore isLoadingMore={this.state.isLoadingMore} loadMoreFn={this.loadMoreData.bind(this)}/>
                    :''
                }
            </div>
        )
    }
    componentDidMount(){
        //获取首页数据
        this.loadFirstPageData();
    }
    //获取首屏数据
    loadFirstPageData() {
        const cityName=this.props.cityName;
        const result=getListData(cityName,0);
        //console.log(result);
        this.resultHandle(result);

    }
    //加载更多数据
    loadMoreData(){
        //记录状态
        this.setState({
            isLoadingMore:true
        });

        const cityName=this.props.cityName;
        const page=this.state.page; //下一页的页码
        const result=getListData(cityName,page);
        this.resultHandle(result);

        //增加page的计数
        this.setState({
            page:page+1,
            isLoadingMore:false
        })
    }
    // 数据处理函数
    resultHandle(result){
        // result.then((res)=>{
        //     return res.json()
        // }).then((json)=>{
        //     const {hasMore,data}=json;
            
        //     //存储
        //     this.setState({
        //         hasMore,
        //         data:this.state.data.concat(data)
        //     })
        // }).catch(err=>{
        //     console.warn("加载更多报错:"+err);
        // });

        //模拟静态假数据
        function timerHandle(listMock){
            const {hasMore,data}=listMock;
            this.setState({
                hasMore,
                data:this.state.data.concat(data)
            })
        }
        setTimeout(timerHandle.bind(this,listMock),200);
        
    }
}

// 使用 require.ensure 异步加载，还不支持 ES6 的 export
export default List